<template>
    <div class="sidebar">
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" theme="dark" unique-opened router  @select="handleSelect">
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :key="item.index" :index="item.key">
                        {{item.index}}
                        <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
                        <el-menu-item class="subMenu" v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :key="item.index" :index="item.index">
                        <i :class="item.icon"></i>{{ item.title }}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>
<script>
export default {
    data(){
        return{
            activeIndex:'',
            items: [
                    // {
                    //     icon: 'el-icon-menu',
                    //     index: '1',
                    //     title: '表格',
                    //     subs: [
                    //         {
                    //             index: 'basetable',
                    //             title: '基础表格'
                    //         }
                    //     ]
                    // },
                    {
                        key:'1',
                        icon: 'el-icon-tickets',
                        index: 'index',
                        title: '个人信息',
                    },
                    {
                        key:'2',
                        icon: 'el-icon-document',
                        index: 'online',
                        title: '在线报考',
                    },
                    {
                        key:'3',
                        icon: 'el-icon-edit-outline',
                        index: 'myTest',
                        title: '我的考试',
                    }                
                ]
        }
    },
    mounted(){
        
        let index = this.$route.path.lastIndexOf("\/")
        this.activeIndex = this.$route.path.substring(index + 1,this.$route.path.length)
    },
    methods:{
        handleSelect(key, keyPath) {
            console.log(key)
        }
    }
}
</script>
<style scoped>
.sidebar{
    display: block;
    position: absolute;
    width: 200px;
    left: 0;
    top: 70px;
    bottom:0;
}
.sidebar > ul {
    height:100%;
}
.el-menu-vertical-demo {
    background-color: #f8f7ee;
}
.sidebar .el-submenu__title{
    color: #fff !important
}
.sidebar .el-submenu__title:hover{
    background-color: #000;
}

.sidebar .el-menu-item {
    text-align: left;
    color: #000;
    font-size:14px;
    height: 60px;
    line-height: 60px;
}
.sidebar .el-menu-item:focus,
.sidebar .el-menu-item:hover {
    color: #5d2805;
    background-color: #eeeae6;
}

.sidebar .el-menu-item.is-active {
    color: #5d2805
}
.sidebar .subMenu {
    background-color: #2E363F;
}
</style>


